<include file="header"/>
<body>
<div class="wraper">
    <div class="header2 header white text-center">
        <a href="#" class="iconfont icon-chevron-left white"></a>
        <div class=" font-16">充值统计</div>
    </div>
    <div class="tab text-center">
        <div class="tab-list extra">
            <p>统计图</p>
        </div>
        <div class="tab-list">
            <p>趋势图</p>
        </div>
    </div>
    <div class="contain actived">
        <div class="padding-12 flex-between">
            <div class="day">
                <input id="month2" type="text"/>
                <div class="kongbai"></div>
            </div>
            <div class="iconfont icon-riqi1 iconrili2 gray2"></div>
        </div>
        <div>
            <div class="flex-between titles">
                <div>互联网金融大厦</div>
                <div>充电时间次数数据</div>
            </div>
            <div id="container1" class="stay-out-late" style="min-width:100%;height:168px">
                <div class="dataload">
                    <img src="/assets/base/statistics/images/loading.gif">
                    <p class="gray text-center">数据加载中</p>
                </div>
            </div>
        </div>
        <div class="content">
            <div class="box flex-center">
                <span class="iconfont icon-mingxishuju icon blue"></span>
                <span>明细数据</span>
            </div>
            <div class="box2 gray">
            </div>
        </div>
    </div>
    <div class="contain ">
        <div class="padding-12 flex-between">
            <div class="day">
                <input id="month" type="text"/>

                <div class="kongbai"></div>
            </div>
            <div class="iconfont icon-riqi1 iconrili1 gray2"></div>
        </div>
        <div class="flex-between titles">
            <div>沃麦隆</div>
            <div>充值统计数据</div>
        </div>
        <div id="container2" class="stay-out-late" style="min-width:100%;height:170px">
            <div class="dataload">
                <img src="/assets/base/statistics/images/loading.gif">
                <p class="gray text-center">数据加载中</p>
            </div>
        </div>
        <div class="content">
            <div class="box flex-center">
                <span class="iconfont icon-mingxishuju icon blue"></span>
                <span>明细数据</span>
            </div>
            <div class="box3 gray">
            </div>
        </div>
    </div>

</div>

</body>
<include file="commonJs"/>
<script>
    $(function () {
        $('#month').mobiscroll().date({
            theme: 'android-holo-light',//皮肤样式
            lang: 'zh',//中文
            display: 'bottom',//位于底部
            dateFormat: 'yyyy/mm'//格式
        });
        $('#month2').mobiscroll().date({
            theme: 'android-holo-light',//皮肤样式
            lang: 'zh',//中文
            display: 'bottom',//位于底部
            dateFormat: 'yyyy/'//格式
        });
    });
    $('.iconrili2').click(function () {
        $('#month2').click();
    });
    $('.iconrili1').click(function () {
        $('#month').click();
    });
    $(function () {
        var date = new Date();
        var month = date.getMonth() + 1;
        var year = date.getFullYear();
        if (month < 10) {
            month = '0' + month;
        }
        var time = year + '/' + month;
        $('#month,#month2').val(time);
        getData(time);
        getYear(year);
    });
    $(function () {
        var time;
        $("#month").change(function () {
            time = $(this).val();
            getData(time);
            getYear(time);
        });
    });
    $(function () {
        $('.tab').on('click', '.tab-list', function () {
            var idx = $(this).index();
            $('.contain').eq(idx).addClass('actived').siblings('.contain').removeClass('actived');
            $(this).addClass('extra').siblings('.tab-list').removeClass('extra');

        })
    });
    function getYear(time) {
        var month = [];
        var monthData = [];
        $.ajax({
            url: ' /base/chargingdataAgent/recharge',
            type: 'POST',
            data: {'create_time': time},
            dataType: 'JSON',
            beforeSend: function () {
                $('.dataload').show();
            },
            success: function (data) {
                $('.dataload').hide();
                if (data.success == 'S') {
                    if (data.data.length > 0) {
                        var _html = '';
                        $.each(data.data, function (i, k) {
                            month.push((k.create_time.substring(5, k.create_time.length)).replace('-', '/'));
                            monthData.push(parseFloat(k.order_amount));
                            _html += ' <div class="data flex-between padding-0"> <div>' + k.create_time + '</div> <div>' + k.order_amount + '元 </div> </div>'
                        });
                        $('.box2').html(_html);
                    }
                }
                setCharts('#container1', month, monthData);
            },
            error: function(XMLHttpRequest, textStatus, errorThrown) {
                alert(XMLHttpRequest.status);
                alert(XMLHttpRequest.readyState);
                alert(textStatus);
            },
        });
    }
    function getData(time) {
        var month = [];
        var monthData = [];
        $.ajax({
            url: ' /base/chargingdataAgent/rechargeTrend',
            type: 'POST',
            data: {'create_time': time},
            dataType: 'JSON',
            beforeSend: function () {
                $('.dataload').show();
            },
            success: function (data) {
                console.log(data);
                $('.dataload').hide();
                if (data.success == 'S'){
                    if (data.data.length > 0){
                        var _html2 = '';
                        $.each(data.data, function (i, k){
                            month.push((k.create_time.substring(5, k.create_time.length)).replace('-', '/'));
                            monthData.push(parseFloat(k.order_amount));
                            _html2 += ' <div class="data flex-between padding-0"> <div>' + k.create_time + '</div> <div>' + k.order_amount + '元 </div> </div>'
                        })
                        $('.box3').html(_html2);
                    }
                }
                setChart('#container2', month, monthData);
            },
            error: function () {
                fm.alert('网络错误，请重试');
            }
        });
    }
    function setCharts(chartname, month, monthData) {
        $(chartname).highcharts({
            chart: {
                type: 'column'
            },
            title: {
                text: ''
            },
            subtitle: {
                text: ''
            },
            xAxis: {
                type: 'category',
                categories: month,
                tickWidth: 0 // 主刻度的宽度
            },
            yAxis: {
                title: {
                    text: ''
                },
                labels: {
                    formatter: function () {
                        var num = this.value / 10000;
                        return num + '万';
                    }
                }
            },
            credits: {
                enabled: false
            },
            legend: {
                enabled: false
            },
            exporting: {
                enabled: false
            },
            series: [{
                name: '',
                color: '#27a7e4',
                data: monthData

            }]
        });
    }
    function setChart(chartname, month, monthData) {
        $(chartname).highcharts({
            title: {
                text: ''
            },
            subtitle: {
                text: ''
            },
            legend: {
                enabled: false
            },
            credits: {
                enabled: false
            },
            xAxis: {
                tickWidth: 0, // 主刻度的宽度
                categories: month,
                labels: {
                    step: 6,
                    align: 'left',
                    x: -2
                }
            },
            yAxis: {
                title: {
                    text: ''
                },
                labels: {
                    formatter: function () {
                        var num = this.value / 10000;
                        return num + '万';
                    }
                }
            },
            plotOptions: {
                series: {
                    marker: {
                        enabled: false

                    }
                }
            },
            tooltip: {
                valueSuffix: ''
            },
            colors: [
                "#27a7e4"
            ],
            series: [{
                name: '',
                data: monthData
            }]
        });
    }
</script>
</html>